@import "common/_functions.scss";
@import "common/_variables.scss";

html,body{
    height: 100%;
    background-color: rgb(237, 237, 237);
}
.textalign{text-align: right;}
.icon-broswer{
    display: inline-block;
    width: rem(24);
    height: rem(24);
    background: url(../img/broswer@2x.png) no-repeat center center;
    background-size: cover;
    vertical-align:middle;
    color: rgb(130, 130, 130);
}

.icon-msg{
    display: inline-block;
    width: rem(24);
    height: rem(24);
    background: url(../img/msg@2x.png) no-repeat center center;
    background-size: cover;
    vertical-align:middle;
    color: rgb(130, 130, 130);
}

.icon-reduce{
    display: inline-block;
    width: rem(16);
    height: rem(16);
    background: url(../img/reduce@2x.png) no-repeat center center;
    background-size: cover;
    vertical-align:middle;
    margin-right: rem(23);
}

.icon-add{
    display: inline-block;
    width: rem(16);
    height: rem(16);
    background: url(../img/add@2x.png) no-repeat center center;
    background-size: cover;
    vertical-align:middle;
    margin-left: rem(23);
}
.icon-qq{
    display: inline-block;
    width: rem(32);
    height: rem(32);
    background: url(../img/qq@2x.png) no-repeat center center;
    background-size: cover;
    vertical-align:middle;
}
.icon-tel{
    display: inline-block;
    width: rem(36);
    height: rem(36);
    background: url(../img/tel@2x.png) no-repeat center center;
    background-size: cover;
}
.mt25{
    margin-top:rem(25);
}
.mr10{
    margin-right: rem(10);
}
//积分 兑换

.jf-buy{
    background-color: #fff;
    .focus img,.focus{
        width: 100%;
        height: rem(375);
    }
    .focus{
        margin-bottom: rem(10);
    }
    .title{
        margin-bottom:rem(36);
        h4{
            width: rem(246);
            margin: 0 auto rem(18);
            text-align: center;
            font-size: rem(22);
        }
        p{
            text-align: center;
        }
    }
    .icon-broswer{
        margin-left: rem(15);
    }

    .sku{
        margin: 0 rem(12);
        .tit{
            margin-right: rem(2);
            line-height: rem(24);
            font-size: rem(16);
        }
        ul{
            border:1px solid rgb(237,237,237);
            border-width: 1px 0 1px 0;
            padding:rem(10) 0;
        }
        li{
            flex-wrap:wrap;
        }
        em{
            line-height: rem(24);
            font-size: rem(16);
            color: #ccc;
        }
        p{
            width:rem(230);
            span.sku-sel{
                display: inline-block;
                width: rem(54);
                height: rem(24);
                background: rgb(245,245, 245);
                margin:0 0 rem(10) rem(10);
                text-align: center;
                line-height: rem(24);
                border-radius: rem(4);
            }
            span.sku-sel.cur{
                background: rgb(255, 101, 101);
                color: #fff;
            }

            .inputText{
                width: rem(46);
                height: rem(24);
                background:rgb(245, 245, 245);
                border-radius:rem(4);
                border:1px solid #ccc;
                text-align: center;
                font-size: rem(12);
            }
        }

    }
    .details{
        margin: 0 rem(12);
        img{
            width: 100%;
        }
        h3{
            font-size: rem(16);
            font-weight: normal;
            margin: rem(36) 0 rem(10);
        }
        .msg{
            font-size: rem(14);
        }

    }

}
.btnbox{
    padding-bottom: rem(60);
    ul{
        height: rem(48);
        background-color:rgb(47, 47, 47);
        position: fixed;
        bottom: 0;
        color: #fff;
        box-sizing:border-box;

    }
    li:first-child{
        color: #fff;
        font-size: rem(24);
        line-height: rem(48);
        width:72%;
        padding-left: rem(25);
        box-sizing:border-box;
        span{
            font-size: rem(12);
            color: #ccc;
            text-decoration:line-through;
        }
    }
    li:first-child em{
        font-size: rem(14);
    }
    li.buy{
        width:28%;
        background-color:rgb(255, 101, 101);
        line-height: rem(48);
        text-align: center;
        font-size: rem(14);
    }
}

//课程内页
.inpage{
    .focus{
        img{
            height:rem(300);
        }
        span.price{
            position: absolute;
            font-size: rem(14);
            color: #fff;
            background-color: rgba(255, 101, 101,1);
            display: inline-block;
            width: rem(128);
            height: rem(32);
            line-height: rem(32);
            text-align: center;
            border-radius: rem(100);
            right: rem(12);
            bottom:rem(-16);

        }
    }
    .text{
        padding:rem(26) rem(24);
        text-indent: rem(28);
        font-size: rem(14);
        color: rgb(70, 80, 80);
    }
    .title{
        margin-bottom: 0!important;
        margin-top: rem(27);
    }
}
.course{
        margin-top: rem(6);
        background-color: #fff;
        padding:rem(8) 0;
        
        h4{
            font-size: rem(14);
            margin:0 rem(8);
            border-left:2px solid #000;
            line-height: 1;
            padding-left: rem(14);
            font-weight: normal;
            box-sizing: border-box;
            a{

            }

        }
        .box{
            margin:rem(8) rem(21);
            background-color: rgb(247, 247, 247);
            padding: 0 rem(10);
            
            .head-ico img{
                width: rem(48);
                height: rem(48);
                border-radius: 100%;
            }
            .h_box{
                justify-content:space-between;
                align-items:center;
                display: -webkit-flex; /* Safari */
                display: flex;
            }

            li{
                height: rem(95);
                
                border-bottom: 1px dashed #ccc;
                h5{
                    font-size: rem(12);
                }
                p{
                    font-size: rem(10);
                    color: rgb(130, 130, 130);
                }
                div{
                    margin:0 rem(10);
                }
                span.focusBtn{
                    width: rem(64);
                    height: rem(22);
                    line-height: rem(22);
                    background-color:rgb(255, 101, 101);
                    color: #fff;
                    border-radius:rem(20);
                    text-align: center;
                }
            }

        }
        .boxone{
            li:last-child{
                border-bottom: none;
            }
            em{
                font-size: rem(18);
            }
            p{
                font-size: rem(12);
                color: rgb(130, 130, 130);
            }
        }
        .boxtwo{
            border-radius: 0 0 rem(6) rem(6); 
            background-color: rgb(237, 237, 237);
            .btn-buy{
                display: inline-block;
                width:rem(271);
                height: rem(95);
                background-color: rgb(255, 101, 101);
                margin-left: rem(-20);
                font-size: rem(24);
                line-height: rem(95);
                text-align: center;
                color: #fff;
                margin-top: rem(-1);
                border-radius: 0 0 rem(6) rem(6);
            }
        }

    }

 .coursepic  .picbox dd{
        a{
            display: inline-block;
            position: relative;
            p{
                position: absolute;
                width: 100%;
                bottom: rem(42);
                text-align: center;
                color: #fff;
                font-size: rem(14);
            }

        }
        img.pic{
            display:block;
            width:97.8%;
            height: rem(205);
            margin: 0 auto rem(4);
            border-radius: rem(6);
        }
    }

.coursepic {
    h4{
        margin-bottom: rem(8);
    }
}

























